<template>
  <div>
    <head-container></head-container>
    <div class="news_main">
      <p class="pos">当前位置：
        <router-link to="/" tag="span">首页</router-link>>
        <span>睿那新闻</span>
      </p>
      <div class="news_list_wrap">
        <section class="news_item" v-for="item in newsList" :key="item.id" @click="goToNewsInfo(item.id)">
          <div class="news_img">
            <img :src="item.banner_url" alt="">
          </div>
          <div class="news_info">
            <h2>{{item.title}}</h2>
            <div class="author_wrap">
              <span class="author">{{item.updated_by?item.updated_by.account :item.created_by?item.created_by:'默认'}}</span>
              <span class="timer">{{GLOBAL.timestampToTime(item.created_at)}}</span>
            </div>
          </div>
        </section>
      </div>
    </div>
    <foot-container></foot-container>
  </div>
</template>
<script>
import headContainer from '../components/headContainer'
import footContainer from '../components/footContainer'
export default {
  name:"News",
  data(){
    return{
      newsList:[],
    }
  },
  components:{
    headContainer,
    footContainer
  },
  mounted(){
    this.GLOBAL.request({
      baseURL:this.GLOBAL.API_RNTY_URL,
      url:'trends/list'
    }).then(({data:data})=>{
      this.newsList = data.data;
    })
  },
  methods:{
    goToNewsInfo(id){
      this.$router.push({path:'/new',query:{id}})
    }
  }
}
</script>
<style scoped>
.news_main{
  width:1200px;
  margin: 0 auto;
  min-height:696px;
  padding-top:116px;
}
.news_main .pos span{
  cursor: pointer;
}
.news_list_wrap{
  margin:25px 0;
}
.news_item{
  height: 190px;
  width:100%;
  padding: 14px;
  box-sizing: border-box;
  background-color: #f9f9f9;
  display: flex;
  cursor: pointer;
  margin:15px 0;
}
.news_img{
  width:280px;
  height:160px;
  margin-right: 50px;
}
.news_img img{
  width:100%;
  height:100%;
}
.news_info{
  width:830px;
}
.news_info h2{
  font:24px/70px "微软雅黑";
  margin-top:26px;
}
.author_wrap{
  font:16px/26px "微软雅黑";
  color:#666;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.author_wrap span{
  padding-left:20px;
  position: relative;
}
.news_item  .timer{
  margin-right: 0;
}
.author_wrap span::after{
  position: absolute;
  left:0;
  top:0;
}
.author_wrap .author::after{
  content: url('../assets/images/author.png');
}
.author_wrap .timer::after{
  content: url('../assets/images/timer.png');
}
</style>

